<template>
  <div id="app">
    <!-- 登录页面 -->
    <div v-if="!isLogin" class="Login">
      <div class="loginBox">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item prop="username">
            <el-input
              placeholder="用户名"
              size="medium"
              suffix-icon="el-icon-user"
              v-model="form.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              suffix-icon="el-icon-lock"
              placeholder="密码"
              type="password"
              v-model="form.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              style="width: 100%"
              type="primary"
              @click="toLogin('ruleForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div v-waves></div>

      <!-- <button @click="isLogin = true">跳转</button> -->
    </div>
    <div v-else>
      <el-container>
        <el-header class="header">
          <div class="fonts">全国疫情可视化平台</div>
          <div class="weather">
            <iframe
              width="500"
              scrolling="no"
              frameborder="0"
              allowtransparency="true"
              src="https://i.tianqi.com?c=code&id=40&icon=3&site=16"
            ></iframe>
            <div class="exit" @click="toExit">
              <div>
                <el-avatar
                  src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2022894887,995087717&fm=26&gp=0.jpg"
                  title="退出"
                ></el-avatar>
              </div>
            </div>
          </div>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <!-- default-active="/"  当前激活菜单的 index -->
            <el-menu
              :default-active="active"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              router
            >

            

              <el-menu-item index="/">
                <i class="el-icon-menu"></i>
                <span slot="title">疫情动态</span>
              </el-menu-item>

              <el-menu-item index="/zhu">
                <i class="el-icon-menu"></i>
                <span slot="title">全国疫情概览</span>
              </el-menu-item>

              <el-menu-item index="/map">
                <i class="el-icon-map-location"></i>
                <span slot="title">疫情地图</span>
              </el-menu-item>

              <el-menu-item index="/current">
                <i class="el-icon-alarm-clock"></i>
                <span slot="title">实时疫情</span>
              </el-menu-item>

              <el-menu-item index="/echart">
                <i class="el-icon-s-data"></i>
                <span slot="title">数据统计</span>
              </el-menu-item>

              <el-menu-item index="/hosp">
                <i class="el-icon-s-cooperation"></i>
                <span slot="title">定点医院</span>
              </el-menu-item>
              <el-menu-item index="/realTime">
                <i class="el-icon-s-marketing"></i>
                <span slot="title">全球疫情</span>
              </el-menu-item>

              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-s-tools"></i>
                  <span>基础配置</span>
                </template>
                <el-menu-item index="/User"> 用户管理 </el-menu-item>
                <el-menu-item index="/Role"> 各地实时疫情 </el-menu-item>
              </el-submenu>

              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-s-operation"></i>
                  <span>疫情管理</span>
                </template>
                <el-menu-item index="/Hospital"> 定点医院 </el-menu-item>
                <el-menu-item index="/InfoList"> 资讯分类 </el-menu-item>
                <el-menu-item index="/article"> 新闻资讯 </el-menu-item>
              </el-submenu>

              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-notebook-2"></i>
                  <span>疫情数据</span>
                </template>
                <el-menu-item index="/List"> 数据列表 </el-menu-item>
                <el-menu-item index="/Up"> 数据上报 </el-menu-item>
              </el-submenu>

              <el-menu-item index="/Kz">
                <i class="el-icon-s-cooperation"></i>
                <span slot="title">扩展页面</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import axios from "./utils/request";
// vuex 状态机 处理组件公用的数据
// h5 sessionStorage 在登陆页面点击登录按钮的时候，存数据到sessionStorage，其他页面要用数据，从sessionStorage里面取
// import Login from "./Login";
export default {
  name: "app",
  // 注册Login组件
  /*  components: {
    Login: Login,
  }, */
  data() {
    return {
      active: "/",
      // 如果没有登录那就是空字符全，为假，登了就是字符串，为真
      isLogin: sessionStorage.getItem("token"),
      form: {},
      rules: {
        //模态框数据校验
        username: [
          //  required: true为必填项 trigger: 'blur'失焦的时候
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          //  required: true为必填项 trigger: 'blur'失焦的时候
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 退出
    toExit() {
      if (status == 0) {
        sessionStorage.removeItem("token");
        this.isLogin = false;
        this.form.password = "";
      }
    },
    //
    toLogin(formName) {
      //确定按钮点击

      // .$refs[formName]中的formname相当于属性 validate通过验证
      this.$refs[formName].validate(async (valid) => {
        // 校验通过
        if (valid) {
          let res = await axios.post("/user/login", this.form);
          if (res.status == 200) {
            res.data.token;
            // 存token到sessionStorage
            // 第一个参数为名字,什么都可以，可以为张三或等等
            sessionStorage.setItem("token", res.data.token);
            this.isLogin = true;
          } else {
            // 提示登录失败的信息
            this.$notify.info({
              title: "消息",
              message: res.statusText,
            });
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: "保存失败",
          });
        }
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  created() {
    this.active = location.hash.slice(1);
    // location可以拿到准确的位置，而route拿到的是"/""
    // console.log(location, "=======");
    // console.log(this.$route, "000");
  },
  // watch:{
  //   $route:function(route){
  //     // console.log(route)
  //     this.active = route.path
  //   }
  // },
};
</script>

<style>
@import "./static/css/waves.css";
body {
  margin: 0;
}
.exit {
  float: right;
  cursor: pointer;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  /* margin-top: 60px; */
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  /* background-color: #d3dce6; */
  color: #333;
  line-height: calc(100vh - 60px);
  min-height: 500px;
}

.el-main {
  /* background-color: #e9eef3; */
  /* color: #80d88a; */
  background-color: #e1f0fa;
  /* height: calc(100vh - 60px); */
  min-height: 500px;
  padding: 10px !important;
}
.el-main > div {
  background-color: #fff;
  border-radius: 10px;
  min-height: calc(100% - 40px);
  padding: 20px;
}
.Login {
  height: 100vh;
  width: 100wh;
  background-image: url(assets/Login.jpg);
  background-size: 100% 100%;
  background-attachment: fixed;
}
.loginBox {
  float: left;
  margin-left: 25%;
  margin-top: 20%;
  /* font-size:300px; */
  font-weight: bold;
  color: black;
  width: 40%;
}
.weather {
  float: right;
  margin-top: 1%;
}
.header {
  background-image: url(assets/header.jpg);
}
.header .fonts {
  float: left;
  margin-left: -1.5%;
  font-size: 21px;
  font-weight: bold;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  width: 13.5%;
  background-color: rgb(119, 194, 255);
}
</style>